<template>
   <div class="header">
       <img src="../../assets/image/index/header-bg.jpg" alt="">
       <p class="p1">限时集采清单</p>
       <p class="p2">特价产品拼单抢购，限时限量，可加入供求金链并链业务， 为你优化供应链，节约成本</p>
       <div class=" button button1">征集优势产品<img src="@/assets/image/list/arrow.png" alt=""></div>
       <div class=" button button2">填写采购需求 </div>
       <div class="icon-area">
                   <div class="icon-item search-icon"><img src="@/assets/image/supply/search-icon.png" alt=""></div>
                   <div class="icon-item user-icon"><img src="@/assets/image/supply/user-icon.png" alt=""></div>
                   <div class="icon-item menu-icon"><img src="@/assets/image/supply/menu-icon.png" alt=""></div>
        </div>
   </div>
</template>

<script>
export default {
   name: '',
   data() {
       return {}
   },
  components: {}
}
</script>

<style scoped lang="less">
    .header{
        position: relative;
    img{
        width: 100%;
        height: 4.1rem;
    }
    .p1{
        font-size: 0.3rem;
        color: white;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 1.16rem;
    }
    .p2{
        text-align: center;
        font-size: 0.24rem;
        transform: scale(5/6);
        transform-origin: 0 0;
        color: #9597a2;
        position: absolute;
        left: 1.02rem;
        top: 1.75rem;
    }
    .button{
        width: 2.5rem;
        height: 0.6rem;
        border: 0.01rem solid #7f6a45;
        font-size: 0.24rem;
        color: #d4aa58;
        text-align: center;
        line-height: 0.6rem;
        font-weight: 700;
        img{
            position: absolute;
            top: 0.22rem;
            right: 0.3rem;
            width: 0.13rem;
            height: 0.18rem;


        }

    }
    .button1{
         position: absolute;
         bottom: 0.8rem;
         left: 1rem;

    }
    .button2{
        position: absolute;
        bottom: 0.8rem;
        right: 1rem;

    }
        .icon-area{
    position: absolute;
    top: 0.28rem;
    right: 0.44rem;
    width: 1.7rem;
    height: 0.4rem;
    display: flex;
    justify-content: space-between;
    .icon-item{
        img{
            width: 0.38rem;
            height: 0.38rem;
        }
        
    }
}

    }
</style>
